<template>
  <div class="game-end-dialog">
    <Modal
      :value="modelState"
      :closable="false"
      draggable
      class-name="game-end-dialog__main"
    >
      <div slot="header">
        <p slot="header" style="color:#f60;text-align:center">
          <Icon :type="isSuccess ? 'ios-ok-circle' : 'ios-close-circle'"></Icon>
          <span>{{ isSuccess ? '恭喜! 你成功了!' : '很遗憾，你失败了.' }}</span>
        </p>
      </div>
      <div class="dialog-content">
        <p>
          你在 {{ gameInfo.gameMode | gameModeToStr }} 中 <br />
          挑战了难度为 {{ gameInfo.difficulty | difficultyToStr }} 的数独迷题
          <br />
          一共获得了{{ gameInfo.score }} 分 <br />
          确认退出 ? <br />
        </p>
      </div>
      <div slot="footer">
        <div class="btn-group">
          <Button type="primary" @click="handleCancelClicked">Cancel</Button>
          <Button type="error" @click="handleRoomExitClicked">Exit Room</Button>
        </div>
      </div>
    </Modal>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Emit } from 'vue-property-decorator'
import { GameMode, Difficulty } from '../types'

export interface GameEndInfo {
  gameMode: GameMode
  difficulty: Difficulty
  score: number
}

@Component({
  model: {
    prop: 'modelState',
    event: 'model-state-changed'
  }
})
export default class GameEndDialog extends Vue {
  @Prop({ default: true }) private readonly modelState!: boolean
  @Prop() private readonly isSuccess!: boolean
  @Prop()
  private readonly gameInfo!: GameEndInfo

  @Emit('model-state-changed')
  modelStateChanged(state: boolean) {}

  @Emit('roomExitClicked')
  roomExitClicked() {}

  handleCancelClicked() {
    this.modelStateChanged(false)
  }

  handleRoomExitClicked() {
    this.modelStateChanged(false)
    this.roomExitClicked()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
</style>
<style lang="scss">
@import '@/styles/general.scss';

.game-end-dialog__main {
  @media screen and (max-width: $size-sm) {
    > div.ivu-modal {
      > div.ivu-modal-content {
        width: 90vw !important;
      }
    }
  }
}
</style>
